<html>
	<head>
		<title>Tables</title>
		<link rel="stylesheet" href="../css/style.css" media="screen">
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/claroGrid.css" />
		<style>
			#dialog { min-width: 200px; }
		</style>
	</head>
	<body class="claro">
		<div id="charts"></div>

		<button id="create_table" type="button"></button>
		<button id="remove_tables" type="button"></button>
		<script>dojoConfig = {parseOnLoad: true}</script>
		<script src="/getJS?item=createMenu"></script>
		<script src="/getJS?item=createTablesList"></script>
		<div id="Test"></div>
		<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script>
		<script>
			require(["dojo/ready", "dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/ContentPane",
				"dijit/form/Button", "dijit/form/MultiSelect", "dijit/form/SimpleTextarea", "dijit/form/TextBox", "dijit/registry",
				"dojox/grid/DataGrid", "dojo/store/Memory", "dojo/data/ObjectStore", "dojo/dom", "dojo/request", "dojo/json", "dojo/_base/window",
				"dojox/charting/Chart", "dojox/charting/themes/Claro", "dojox/charting/plot2d/Pie", "dojox/charting/action2d/Tooltip", 
				"dojox/charting/action2d/MoveSlice", "dojox/charting/plot2d/Markers", "dojox/charting/axis2d/Default", 
				"dojox/charting/plot2d/StackedAreas", "dojox/charting/plot2d/StackedLines", "dijit/form/ComboBox", "dijit/MenuBar", 
				"dijit/PopupMenuBarItem", "dijit/Menu", "dijit/MenuItem", "dijit/DropDownMenu", "dijit/MenuBarItem" ],
				function(ready, BorderContainer, TabContainer, ContentPane, Button, Multiselect, SimpleTextarea, TextBox, registry,
					DataGrid, Memory, ObjectStore, dom, request, JSON, win, Chart, theme, Pie, Tooltip, MoveSlice, Markers, Default, StackedAreas, 
					StackedLines, ComboBox, MenuBar, PopupMenuBarItem, Menu, MenuItem, DropDownMenu, MenuBarItem){
				ready(function() {
					var bc = new BorderContainer({style: "width: 100%; height: 100%;"});
					/*var tablesPane = new ContentPane({
						region: "trailing",
						style: "width: 25%; height: 100%;",
						content: createTablesList(request, JSON).domNode});*/
					var chartsPane = new ContentPane({
						region: "leading",
						style: "width: 70%; height: 100%;",
						content: ""});
					var topPane = new ContentPane({
						region: "top",
						style: "width: 100%; height 5%;",
						content: createMenu(request, JSON).domNode});
					//bc.addChild(tablesPane);
					bc.addChild(createTablesList(request, JSON, updateComboBoxPie, dom, win));
					bc.addChild(chartsPane);
					bc.addChild(topPane);
					/*var tables = new Multiselect({
						id: "tables",
						name: "tables",
						style: "height: 95%; width: 100%;",
						//multiple: false,
						onChange: function(value){
							console.log(value[0]);
							getDataTable("tableCol", {"table":value[0], "typeof":true}, updateComboBoxPie);
							console.log(value);
						}});*/
					/*var createTable = new Button({
						name: "create_table",
						label: "New Table",
						onClick: function() {
							window.location = "/importIssues"
						}}, "create_table");
					var removeTables = new Button({
						name: "remove_tables",
						label: "Remove Tables",
						onClick: function() {
						
						}}, "remove_tables");*/
					var charts = new TabContainer({
						style: "width: 100%; height: 100%",
						}, "charts");
					var pie = new ContentPane({
						title: "Pie",
						style: "width: 100%; height: 80%;",
						content: ""});
					charts.addChild(pie);
					var line = new ContentPane({
						title: "Line",
						style: "width: 100%; height: 80%;",
						content: ""});
					charts.addChild(line);
					var scatter = new ContentPane({
						title: "Scatter",
						style: "width: 100%; height: 100%;",
						content: ""});
					charts.addChild(scatter);
					var area = new ContentPane({
						title: "Area",
						style: "width: 100%; height: 100%;",
						content: ""});
					charts.addChild(area);
					var bar = new ContentPane({
						title: "Bar",
						style: "width: 100%; height: 100%;",
						content: ""});
					charts.addChild(bar);
					var table = new ContentPane({
						title: "Table",
						style: "width: 100%; height: 100%;",
						content: ""});
					charts.addChild(table);
					/*tablesPane.set("content", [
						createTable.domNode,
						removeTables.domNode,
						tables.domNode]);*/
					
					chartsPane.set("content", [
						charts.domNode]);
					document.body.appendChild(bc.domNode);
					var pieBC = new BorderContainer({style: "width: 100%; height: 100%;"});
					var pieLeft = new ContentPane({
						region: "leading",
						style: "height: 100%; width: 70%;",
						content: ""});
					var pieRight = new ContentPane({
						region: "trailing",
						style: "height: 100%; wdith: 28%;",
						content: ""});
					var combobox = new ComboBox({
						id: "comboColumns",
						name: "Columns",
						placeHolder: "Select Column",
						searchAttr: "name"}, "comboColumns");
					pieRight.set("content", [combobox.domNode]);
					pieBC.addChild(pieLeft);
					pieBC.addChild(pieRight);
					
					//pieChart(pieBC);
					pie.set("content", pieBC.domNode);
					function pieChart(data){
					
						// Define the data
						//var chartData = [10000,9200,11811,12000,7662,13887,14200,12222,12000,10009,11288,12099];
						
						// Create the chart within it's "holding" node
						var chart = new Chart(pieLeft.domNode);
						//pieBC.addChild(chart);

						// Set the theme
						chart.setTheme(theme);

						// Add the only/default plot 
						chart.addPlot("default", {
							type: Pie,
							markers: true,
							radius:170
						});
						
						// Add axes
						chart.addAxis("x");
						chart.addAxis("y", { min: 5000, max: 30000, vertical: true, fixLower: "major", fixUpper: "major" });

						// Add the series of data
						chart.addSeries(Object.keys(data)[0],data[Object.keys(data)[0]]);
						
						// Create the tooltip
						var tip = new Tooltip(chart,"default");
						
						// Create the slice mover
						var mag = new MoveSlice(chart,"default");
						
						// Render the chart!
						chart.render();
						//pie.set("content", chart.domNode);
						//pieBC.startup()
					}
					//areaChart("");
					getData("Table", "Area", areaChart);
					getData("Table", "Pie", pieChart)
					function areaChart(data){
						var chart = new Chart(area.domNode);
						chart.addPlot("default", {type: StackedAreas, tension:3})
							.addAxis("x", {fixLower: "major", fixUpper: "major"})
							.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", min: 0})
							.setTheme(theme)
						for (series in data) {
							chart.addSeries(series, data[series]);
						}
						chart.render();
					}
					
					/*
						Different Types:
						table: gives the hole table.
						col: gives the column of the specified table.
						tableCol: gives all the columns in a table.
						database: gives all of the tables in the database.
					*/
					function updateComboBoxPie(data, dom, win){
						var items = {data:[]}
						//console.log(items[data])
						var fields = []
						for (var i = 0; i < data.length; i++) {
							var item = data[i];
							fields = fields.concat([{name:item, id:item}]);
						}
						var items = {data:fields}
						var dataStore = new Memory(items);
						registry.byId("comboColumns").set("store", dataStore);
						registry.byId("comboColumns").set("searchAttr", "name");
					}
					
					/*function updateTables(data){
						console.log(data);
						//list = registry.byId("tables");
						var attr = dom.byId('tables');
						var n = 0;
						console.log(typeof(data));
						console.log(typeof(data[0]));
						for(var i = 0; i < data.length; i++){
							record = data[i];
							console.log(record)
							var add = win.doc.createElement('option');
							add.innerHTML = record;
							add.value = record;
							attr.appendChild(add);
						}
					}*/
					//getDataTable("database", "test", updateTables);
					function getData(type, value, update){
						request.post("data", {
							data: {
								data: JSON.stringify({type: type, table: value})
							},
							handleAs: "json"}).then(function(data) {
								//console.log(data);
								update(data)
							});
					}
					/*function getDataTable(type, value, update){
						request.post("table", {
							data: {
								data: JSON.stringify({type: type, value: value})
							},
							handleAs: "json"}).then(function(data) {
								console.log(data);
								update(data)
							});
					}*/
					/*linesChart();
					function linesChart(){
						var chart = new Chart(line.domNode);
						chart.addPlot("default", {type: StackedLines})
							.addAxis("x")
							.addAxis("y", {vertical: true})
							.setTheme(theme)
							.addSeries("Series A", [1, 2, 0.5, 1.5, 1, 2.8, 0.4])
							.addSeries("Series B", [2.6, 1.8, 2, 1, 1.4, 0.7, 2])
							.addSeries("Series C", [6.3, 1.8, 3, 0.5, 4.4, 2.7, 2])
							.render();
					}*/
					//pieBC.startup();
					//console.log(pieChart().domNode)
					//pie.set("content", [pieChart().domNode]);
					bc.startup();
				});
			});
		</script>
	</body>
</html>